<template>
	<view class="box">
		<!-- 上半部 -->
		<view class="living-top">
			<view>
				<image @click="goBack" class="back" src="@/static/zhibo/guanbiW.png" />
			</view>
			<view class="living-end">直播已结束</view>
			<view class="living-time">直播时长：00:00:00</view>
			<view class="living-head"></view>
			<view class="living-name">悦享采耳</view>
			<view class="living-btn" @tap="()=>{
				$util.goUrl({
					url: `/pages/live`
				})
			}">查看更多直播</view>
		</view>
		<!-- 下半部 -->
		<view class="content">
			<view class="content-list">
				<!-- 左 -->
				<view class="list-left" v-for="(item, index) in list" :key="index" @tap="goLive(item.id,item)">
					<!-- 上 -->
					<view class="left-top">
						<view class="top-iconfont">
							<image class="top-icon" src="../../static/live/live-image.png" mode="scaleToFill" />
						</view>
						<view class="top-text">直播中</view>
					</view>
					<!-- 下 -->
					<view class="left-bottom">
						<!-- 标题 -->
						<view class="bottom-title">{{item.title}}</view>
						<view class="bottom-list">
							<view class="list-left-right">
								<view class="list-head">
									<image class="list-head-img" :src="item.cover" mode="scaleToFill" />
								</view>
								<view class="list-nickname">{{JSON.parse(item.anchorInfo).nickName}}</view>
							</view>
							<view class="list-left-right">
								<view class="list-people">1.1万</view>
								<view>在看</view>
							</view>
						</view>
					</view>
					<view class="bgimage">
						<image class="bgimage-image" :src="JSON.parse(item.anchorInfo).avatarUrl" mode="scaleToFill" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			goBack() {
				this.$util.goUrl({
					url: `/pages/live`
				})
			},
			async getList() {
				let res = await this.$api.live['getLivelist']({
					cate_id: 0,
					page: 0
				})
				if (res) {
					console.log(res);
					this.list = res.slice(0, 4)
				}
			},
			// 去看直播
			async goLive(live_id = "1", value) {
				if (value.is_online !== 1) {
					uni.showModal({
						content: "直播尚未开启！",
						showCancel: false
					});
				} else {
					let res = await this.$api.live['getUserLeave']({
						live_id
					})
					value.pullurl = res.pullurl
					this.live_list = []
					this.$util.goUrl({
						url: `/live/pages/index?params=${encodeURIComponent(JSON.stringify(value))}`
					})
					this.tab_index = 0
				}
			}
		}
	}
</script>

<style lang="scss">
	.back {
		position: absolute;
		right: 5%;
		top: 5%;
		width: 45rpx;
		height: 45rpx;
	}

	// 上半部
	.living-top {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 60rpx 0 40rpx;
	}

	// 标题
	.living-end {
		color: #000000;
		font-weight: bold;
		font-size: 33rpx;
	}

	// 直播时长
	.living-time {
		color: #999999;
		font-weight: bold;
		font-size: 24rpx;
		margin: 10rpx 0;
	}

	// 头像
	.living-head {
		width: 148rpx;
		height: 148rpx;
		background: #1A191E;
		border: 2px solid #4FB784;
		border-radius: 50%;
		margin-top: 60rpx;
	}

	// 主播昵称
	.living-name {
		color: #000000;
		font-weight: bold;
		font-size: 36rpx;
		margin: 20rpx 0 40rpx;
	}

	// 更多按钮
	.living-btn {
		background-color: #7CC892;
		color: #fff;
		width: 300rpx;
		height: 82rpx;
		line-height: 82rpx;
		text-align: center;
		border-radius: 40rpx;
		font-size: 30rpx;
	}

	// 内容
	.content {
		padding: 30rpx;
		color: #fff;
	}

	// 内容列表
	.content-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	// 列表左
	.list-left {
		width: 48%;
		height: 445rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		position: relative;
		border-radius: 20rpx;
	}

	// 左上
	.left-top {
		display: flex;
		justify-content: space-between;
		background-color: #5F5747;
		width: 122rpx;
		height: 42rpx;
		line-height: 42rpx;
		font-size: 22rpx;
		padding: 0 6rpx;
		border-radius: 10rpx;
	}

	// 图标空间
	.top-iconfont {
		margin: 10rpx;
	}

	// 字体图片
	.top-icon {
		width: 18rpx;
		height: 18rpx;
	}

	// 空间字体
	.top-text {
		margin-right: 10rpx;
	}

	// 左下
	.left-bottom {
		position: absolute;
		bottom: 20rpx;
		width: 90%;
	}

	// 直播标题
	.bottom-title {
		font-size: 24rpx;
		width: 80%;
		margin-bottom: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	// 底部列表
	.bottom-list {
		display: flex;
		justify-content: space-between;
		font-size: 22rpx;
		height: 46rpx;
		line-height: 46rpx;
	}

	// 列表左右
	.list-left-right {
		display: flex;
		justify-content: space-between;
	}

	// 头像
	.list-head {
		width: 46rpx;
		height: 46rpx;
		border-radius: 50%;
	}

	// 头像图片
	.list-head-img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	// 昵称
	.list-nickname {
		padding-left: 10rpx;
	}

	// 人数
	.list-people {
		padding-right: 10rpx;
	}

	// 下列表-背景
	.bgimage {
		width: 100%;
		height: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -1;
	}

	// 背景-图片
	.bgimage-image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}
</style>